/*
 *@description:登录后的首页
 *@Author:@rennan
 *@Date:2023-12-26 16:55:37
 *@version: V1.0.0
*/
<template>
  <div class="home_box">
    <div class="home_title">易洁家政平台</div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" style="width: 100%;height: 160px;border-radius: 8px;" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品宫格排列 -->
    <div class="home_list">
      <van-grid :gutter="5" :column-num="5" :border="false">
        <van-grid-item v-for="item in gridList" :key="item.id" :icon="item.icon" :text="item.text" @click="gridClik(item.id)"/>
      </van-grid>

      <!-- 家政项目宫格 -->
      <div class="home_grid">
        <ProductDetail v-for="item in objs" :key="item.id" :imgUrl="item.imgUrl" :imgText="item.text" :productItem="item"
          @get-show="getShowBol" />
      </div>
    </div>

    <!-- 动作面板 -->
    <van-action-sheet v-model="show" title="家政详情">
      <div class="content">
        <div class="action_box">
          <!-- 图片区域 -->
          <div class="image_box">
            <img :src="itemObj?.imgUrl" alt="" style="height: 160px;" />
          </div>
          <!-- 价格 -->
          <div class="price">
            ￥/ {{ itemObj?.price }}
          </div>
          <!-- 分割线 -->
          <div class="divider"></div>
          <!-- 详情 -->
          <div class="xiangqing">
            详情
            <div class="text">{{ itemObj?.description }}</div>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import ProductDetail from '@/components/ProductDetail/index.vue'

import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload)
export default {
  data() {
    return {
      show: false,
      itemId:0,
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
      // 自定义大宫格静态数据源
      objs: [
        {
          id: 1001,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '盆景摆放',
          price: 100,
          description: '进行盆景的摆放工作...'
        },
        {
          id: 1002,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '盆景修剪',
          price: 110,
          description: '进行盆景的摆放工作...'
        },
        {
          id: 1003,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '冰箱清洗',
          price: 108,
          description: '进行盆景的摆放工作...'
        },
        {
          id: 1004,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '冰箱清洗',
          price: 211,
          description: '进行盆景的摆放工作...'
        },
        {
          id: 1005,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '冰箱清洗',
          price: 205,
          description: '进行盆景的摆放工作...'
        },
        {
          id: 1006,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '冰箱清洗',
          price: 125,
          description: '进行盆景的摆放工作...'
        },
        {
          id: 1007,
          imgUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          text: '冰箱清洗',
          price: 150,
          description: '进行盆景的摆放工作...'
        }
      ],
      // 宫格布局部分的静态数据源
      gridList:[
        {
          id:1001,
          icon:"flower-o",
          text:"家庭保洁"
        },
        {
          id:1002,
          icon:"calendar-o",
          text:"衣物护理"
        },
        {
          id:1003,
          icon:"shield-o",
          text:"母婴陪护"
        },
        {
          id:1004,
          icon:"apps-o",
          text:"家居养护"
        },
        {
          id:1005,
          icon:"cashier-o",
          text:"家电清洗"
        },
      ]
    }
  },
  computed:{
    itemObj(){
      return this.objs.filter(x=>x.id==this.itemId)[0]
    }
  },
  methods: {
    // 子传父获取数据的方法
    getShowBol(value1,value2) {
      this.show = value1
      this.itemId = value2
    },
    //点击宫格跳转到项目列表的方法
    gridClik(id){
      console.log(id,"---111");
      // 当点击具体的家政项目时，跳转到列表详情页面
      this.$router.push('/main/product/'+id)
    }
  },
  components: {
    ProductDetail
  }
}
</script>
<style scoped>
.home_title {
  height: 130px;
  background-image: linear-gradient(90deg, #ff5f6d, #ffc371);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  color: #fff;
  font-size: 29px;
  text-align: center;
  padding-top: 5px;
}

.swipe {
  width: 90%;
  height: 160px;
  position: absolute;
  top: 60px;
  left: 5%;
  box-shadow: 0 0 10px 0 #aaa;
  border-radius: 8px;
}

.home_list {
  position: relative;
  top: 105px;
}

.home_list .home_grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}

.content {
  padding: 16px 16px 160px;
}

.action_box {
  text-align: center;
}
.action_box .price{
  color: red;
  margin-top: 10px;
  margin-bottom: 15px;
}

.action_box .divider{
  border: 1px solid black;
}

.action_box .xiangqing{
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}
.action_box .xiangqing .text{
  font-size: 16px;
  font-weight: 400;
}
</style>